<template>
  <view class="container">
    <view class="order-create-content">
      <!-- 订单基础信息 -->
      <view class="basic-info" v-if="orderDetailGetted">
        <ve-form :model="form" ref="formRef" :rules="rules">
          <customer ref="customerRef" editCurrentMemberBntShow mode="edit" fold v-model:initFold="foldStatus.customer" />
          <!-- 订单待排车、待用车阶段 -->
          <template v-if="orderStatus == 'notStarted'">
            <!-- 自动维护 -->
            <template v-if="!orderIsMaintenance(orderInfo)">
              <summary-info
                title="租赁信息"
                :summaryList="summaryLease"
                :customContentStyle="orderStatus == 'orderInProgress' && foldStatus.lease ? { paddingBottom: 0 } : {}"
                v-model:initFold="foldStatus.lease"
              >
                <template #leasePeriod>
                  <view class="lease-period">
                    <view class="lease-period-val">{{ orderInfo.startTime ? `${orderInfo.startTime} - ${orderInfo.endTime}` : '-' }}</view>
                    <view class="lease-period-rentdays" v-if="orderInfo.rentDays">租期：{{ orderInfo.rentDays }}</view>
                  </view>
                </template>
              </summary-info>
            </template>
            <!-- 手动维护 -->
            <template v-else>
              <lease
                ref="leaseRef"
                mode="edit"
                :orderStatus="orderStatus"
                fold
                :customContentStyle="{ paddingBottom: 0 }"
                v-model:initFold="foldStatus.lease"
              />
              <platoon fold v-model:initFold="foldStatus.platoon" />
            </template>
          </template>
          <!-- 用车中 or 已还车、已完成 -->
          <view class="edit-lease-summary" v-else>
            <summary-info
              title="租赁信息"
              :summaryList="summaryLease"
              :customContentStyle="
                orderStatus == 'orderInProgress' && orderIsMaintenance(orderInfo) && foldStatus.lease ? { paddingBottom: 0 } : {}
              "
              v-model:initFold="foldStatus.lease"
            >
              <template #leasePeriod>
                <view class="lease-period">
                  <view class="lease-period-val">{{ orderInfo.startTime ? `${orderInfo.startTime} - ${orderInfo.endTime}` : '-' }}</view>
                  <view class="lease-period-rentdays" v-if="orderInfo.rentDays">租期：{{ orderInfo.rentDays }}</view>
                </view>
              </template>
              <!-- 用车中 -->
              <view class="edit-lease-return">
                <view class="edit-lease-return-border"></view>
                <lease mode="edit" :orderStatus="orderStatus" ref="leaseRef" />
              </view>
            </summary-info>
            <!-- 交车信息 -->
            <ve-card title="交车信息" fold :customContentStyle="{ paddingBottom: 0 }" v-model:initFold="foldStatus.giveCar">
              <template #forever-show="{ contentIsShow }">
                <ve-form-item required prop="giveStaffId" label="交车人">
                  <remote-select
                    v-model="form.giveStaffId"
                    v-model:label="form.giveStaffName"
                    :params="{
                      oldId: form.giveStaffId,
                      siteIdList: [orderInfo.siteId],
                    }"
                    type="staff_all_bysite"
                  />
                </ve-form-item>
                <ve-form-item required prop="useStartTime" label="交车时间" :borderBottom="contentIsShow">
                  <ve-date-picker v-model="form.useStartTime" mode="datetime" />
                </ve-form-item>
              </template>
              <ve-form-item label="交车里程" unit="公里">
                <ve-input-number :precision="0" v-model="form.startCarMileage" />
              </ve-form-item>
              <ve-form-item label="交车油(电)量">
                <ve-input-number :precision="0" :min="1" :max="99999" v-model="form.startCarOil" />
              </ve-form-item>
              <ve-form-item label="交车照片" labelPosition="top">
                <view class="video-wrapper">
                  <otaImgPreview
                    :urlList="orderInfo.giveCarInfoDto?.giveOtaFileUrls"
                    v-if="orderInfo.giveCarInfoDto?.giveOtaFileUrls?.length > 0"
                  />
                  <ve-upload v-model="form.giveFileIds" />
                </view>
              </ve-form-item>
              <ve-form-item label="交车视频" labelPosition="top">
                <view class="video-wrapper">
                  <otaVideoPreview
                    :urlList="orderInfo.giveCarInfoDto?.giveVideoOtaFileUrls"
                    v-if="orderInfo.giveCarInfoDto?.giveVideoOtaFileUrls?.length > 0"
                  />
                  <ve-upload-video v-model="form.giveVideoFileIds" :readonly="false" />
                </view>
              </ve-form-item>
              <ve-form-item label="交车备注" labelPosition="top" :borderBottom="false">
                <ve-input type="textarea" v-model="form.useStartRemark" :maxlength="200" placeholder="请输入备注" />
              </ve-form-item>
            </ve-card>
            <!-- 还车信息 -->
            <ve-card
              title="还车信息"
              fold
              v-if="orderStatus == 'orderCompleted'"
              :customContentStyle="{ paddingBottom: 0 }"
              v-model:initFold="foldStatus.returnCar"
            >
              <template #forever-show="{ contentIsShow }">
                <ve-form-item required prop="returnStaffId" label="还车人">
                  <remote-select
                    v-model="form.returnStaffId"
                    v-model:label="form.returnStaffName"
                    :params="{
                      oldId: form.giveStaffId,
                      siteIdList: [orderInfo.returnSiteId],
                    }"
                    type="staff_all_bysite"
                  />
                </ve-form-item>
                <ve-form-item required prop="useEndTime" label="还车时间" :borderBottom="contentIsShow">
                  <ve-date-picker v-model="form.useEndTime" :minDate="prevGivecarTime" mode="datetime" />
                </ve-form-item>
              </template>
              <ve-form-item label="还车里程" unit="公里">
                <ve-input-number :precision="0" :min="prevGivecarMileage" v-model="form.endCarMileage" />
              </ve-form-item>
              <ve-form-item label="还车油(电)量">
                <ve-input-number :precision="0" :min="1" :max="99999" v-model="form.endCarOil" />
              </ve-form-item>
              <ve-form-item label="还车照片" labelPosition="top">
                <view class="video-wrapper">
                  <otaImgPreview
                    :urlList="orderInfo.returnCarInfoDto?.returnOtaFileUrls"
                    v-if="orderInfo.returnCarInfoDto?.returnOtaFileUrls?.length > 0"
                  />
                  <ve-upload v-model="form.returnFileIds" />
                </view>
              </ve-form-item>
              <ve-form-item label="还车视频" labelPosition="top">
                <view class="video-wrapper">
                  <otaVideoPreview
                    :urlList="orderInfo.returnCarInfoDto?.returnVideoOtaFileUrls"
                    v-if="orderInfo.returnCarInfoDto?.returnVideoOtaFileUrls?.length > 0"
                  />
                  <ve-upload-video v-model="form.returnVideoFileIds" :readonly="false" />
                </view>
              </ve-form-item>
              <ve-form-item label="还车备注" labelPosition="top" :borderBottom="false">
                <ve-input type="textarea" v-model="form.useEndRemark" :maxlength="200" placeholder="请输入备注" />
              </ve-form-item>
            </ve-card>
          </view>
        </ve-form>
      </view>
    </view>
    <!-- 编辑订单修改租期二次确认 -->
    <ve-confirm titleText="提示" v-model="confirmVisible" @cancel="confirmCancel" @confirm="confirmSubmit">
      预计租赁周期变更，租车费产生差异，请到订单详情-费用信息页修改费用信息，请确认是否修改？
    </ve-confirm>
    <!-- 底部 footer -->
    <footer-box id="footer-box">
      <ve-button size="long" :loading="okLoading" type="primary" @click="submitFn">完成</ve-button>
    </footer-box>
    <InputWidthHelper />
  </view>
</template>

<script setup>
  import { ref, provide, computed, nextTick } from 'vue'
  // 组件
  import customer from '../../components/customer/index.vue'
  import lease from './components/lease.vue'
  import platoon from './components/platoon.vue'
  import footerBox from './components/footerBox.vue'
  import summaryInfo from '../components/summary-info.vue'
  import InputWidthHelper from './components/InputWidthHelper.vue'
  import { getShortOrdrDetailsAPI, modifyOrderAPI } from '@/api/order/sOrder'
  import { checkMemberAPI } from '@/api/order/order'
  import otaVideoPreview from '@/components/ota-video-preview.vue'
  import otaImgPreview from '@/components/ota-img-preview.vue'
  // ---------------------------
  import { usePageDict } from '@/hooks/useDict'
  const dict = usePageDict('shortOrderDict')
  import useFormFold from '@/hooks/useFormFold'
  import { onLoad } from '@dcloudio/uni-app'
  import { timeRangeValidator } from './form-tool.js'
  import { orderIsMaintenance } from '../tools.js'
  import useToast from '@/hooks/useToast'
  provide('dict', dict)

  const { foldStatus, foldValidate } = useFormFold([
    {
      key: 'customer',
      props: ['memberType', 'memberPhone', 'memberName', 'clientId'],
    },
    {
      key: 'lease',
      props: ['siteId', 'orderSource', 'timeRange', 'originalModelId'],
    },
    {
      key: 'platoon',
      props: [],
    },
    {
      key: 'giveCar',
      props: ['giveStaffId', 'useStartTime'],
    },
    {
      key: 'returnCar',
      props: ['returnStaffId', 'useEndTime'],
    },
  ])

  // 表单对象
  const form = ref({
    timeRange: [],
  })
  const orderId = ref()
  const orderDetailGetted = ref(false)
  // 订单状态别名
  const orderStatus = ref('orderInProgress') // 'notStarted' | 'orderInProgress' | 'orderCompleted'
  provide('orderStatus')
  onLoad((options) => {
    orderId.value = options.id
    // 获取订单详情
    getShortOrdrDetailsAPI({ id: orderId.value }).then(({ result }) => {
      orderDetail.value = result
      orderInfo.value = result.orderInfo
      // 待排车 | 待交车
      if ([10, 100].includes(orderInfo.value.orderStatus)) orderStatus.value = 'notStarted'
      // 用车中
      if ([200].includes(orderInfo.value.orderStatus)) orderStatus.value = 'orderInProgress'
      // 已还车、已完成
      if ([300, 1000].includes(orderInfo.value.orderStatus)) orderStatus.value = 'orderCompleted'

      initFormValue()
      // 处理交还车信息
      handleOrderCarInfos()
      orderDetailGetted.value = true

      let status = orderInfo.value.orderStatus
      let wait = [10, 100].includes(status)
      let use = [200].includes(status)
      let _return = [300].includes(status)
      let complete = [1000].includes(status)

      foldStatus.customer = use || _return ? false : true
      foldStatus.lease = use || _return ? false : true
      foldStatus.platoon = wait ? true : false
      foldStatus.giveCar = use ? true : false
      foldStatus.returnCar = _return ? true : false
    })
  })
  // 处理订单交还车信息
  const handleOrderCarInfos = () => {
    const orderInfoVal = orderInfo.value
    const shortOrderCarInfoDtos = orderInfoVal.shortOrderCarInfoDtos
    if (shortOrderCarInfoDtos?.length > 0) {
      // 用车中
      if (orderStatus.value == 'orderInProgress' || orderStatus.value == 'orderCompleted') {
        let carInfo = shortOrderCarInfoDtos[0]
        form.value = {
          ...form.value,
          startCarMileage: carInfo.startCarMileage,
          startCarOil: carInfo.startCarOil,
          giveStaffId: carInfo.giveStaffId,
          giveStaffName: carInfo.giveStaffName,
          useStartTime: carInfo.useStartTime,
          useStartRemark: carInfo.useStartRemark,
          giveFileIds: carInfo.giveFileIds,
          giveVideoFileIds: carInfo.giveVideoFileIds,
        }
      }
      // 已还车、已完成
      if (orderStatus.value == 'orderCompleted') {
        let carInfo = shortOrderCarInfoDtos[shortOrderCarInfoDtos.length - 1]
        form.value = {
          ...form.value,
          endCarMileage: carInfo.endCarMileage,
          endCarOil: carInfo.endCarOil,
          returnStaffId: carInfo.returnStaffId,
          returnStaffName: carInfo.returnStaffName,
          useEndTime: carInfo.useEndTime,
          useEndRemark: carInfo.useEndRemark,
          returnFileIds: carInfo.returnFileIds,
          returnVideoFileIds: carInfo.returnVideoFileIds,
        }
      }
    }
  }

  // 最后一次交车信息
  const prevOrderCarInfo = computed(() => {
    const orderCarInfos = orderInfo.value.shortOrderCarInfoDtos
    let lastOrderCarInfo = {}
    if (orderCarInfos && orderCarInfos.length > 0) {
      lastOrderCarInfo = orderCarInfos[orderCarInfos.length - 1]
    }
    return lastOrderCarInfo
  })
  const prevGivecarMileage = computed(() => {
    return prevOrderCarInfo.value.startCarMileage
  })
  const prevGivecarTime = computed(() => {
    return prevOrderCarInfo.value.useStartTime
  })

  provide('form', form)

  // 订单详情
  const orderDetail = ref({})
  const orderInfo = ref({})
  provide('orderInfo', orderInfo)

  // 初始化 formValue
  const customerRef = ref()
  const leaseRef = ref()
  const initFormValue = () => {
    let memberInfoDto = orderDetail.value.memberInfoDto || {}
    let orderInfo = orderDetail.value.orderInfo
    form.value = {
      ...form.value,
      id: orderId,
      // 会员信息取订单中的信息
      clientId: orderInfo.clientId,
      clientName: orderInfo.clientName,
      memberId: orderInfo.memberId,
      memberName: orderInfo.memberName,
      memberPhone: orderInfo.memberPhone,
      cardType: memberInfoDto.cardType || 0,
      cardNumber: memberInfoDto.cardNumber,
      // 驾驶证正反面信息
      driverFrontFileId: memberInfoDto.driverFrontFileId,
      driverReverseFileId: memberInfoDto.driverReverseFileId,
      // 身份证明正反面信息
      idCardFrontFileId: memberInfoDto.idCardFrontFileId,
      idCardReverseFileId: memberInfoDto.idCardReverseFileId,
      // 订单相关信息
      orderSource: orderInfo.orderSource,
      orderSourceName: orderInfo.orderSourceName,
      // 客户类型
      memberType: orderInfo.memberType,
      memberTypeName: orderInfo.memberTypeName,
      // 渠道类型
      channelType: orderInfo.channelType,
      channelTypeName: orderInfo.channelTypeName,
      // 渠道订单号
      channelOrderCode: orderInfo.channelOrderCode,
      // 订单获取方式
      orderAcquisitionType: orderInfo.orderAcquisitionType,
      orderAcquisitionTypeName: orderInfo.orderAcquisitionTypeName,
      // 租期
      startTime: orderInfo.startTime,
      endTime: orderInfo.endTime,
      timeRange: [orderInfo.startTime, orderInfo.endTime],
      rentDays: orderInfo.rentDays,
      // 门店
      siteId: orderInfo.siteId,
      returnSiteId: orderInfo.returnSiteId,
      address: orderInfo.address,
      longitude: orderInfo.longitude,
      latitude: orderInfo.latitude,
      returnAddress: orderInfo.returnAddress,
      returnLongitude: orderInfo.returnLongitude,
      returnLatitude: orderInfo.returnLatitude,
      sendServiceFlag: orderInfo.sendServiceFlag,
      returnServiceFlag: orderInfo.returnServiceFlag,
      // 备注
      remark: orderInfo.remark,
    }

    // 显示未上传证件
    nextTick(() => {
      nextTick(() => {
        if (customerRef.value) {
          customerRef.value.updateUploadDriverBtnStatus(!form.value.driverFrontFileId || !form.value.driverReverseFileId)
          // 更新显示上传身份证明按钮
          customerRef.value.updateUploadIdCardBtnStatus(
            !form.value.idCardFrontFileId || (form.value.cardType == 0 && !form.value.idCardReverseFileId),
          )
          customerRef.value.updateMemberInfo(memberInfoDto)
        }
        const { orderInfo } = orderDetail.value
        // 更新取还车门店是否显示
        if (leaseRef.value) {
          // 更新取车门店
          leaseRef.value.updateShortsiteConfig(orderInfo.siteId, orderInfo.siteName, 'site')
          // 更新还车门店
          leaseRef.value.updateShortsiteConfig(orderInfo.returnSiteId, orderInfo.returnSiteName, 'returnSite')
        }
        nextTick(() => {
          // 车辆
          form.value.carId = orderInfo.carId
          form.value.carLicenseNo = orderInfo.carLicenseNo
          form.value.carSource = orderInfo.carSource
          // 存在 carId 的情况下，车牌号对应的车型名称赋值，否则不赋值
          form.value.originalSiteModelName = orderInfo.carId ? orderInfo.carModelName : undefined
          // 车型
          form.value.originalModelId = orderInfo.originalModelId
          form.value.originalModelName = orderInfo.originalModelName
        })
      })
    })
  }

  // 顶部统计信息
  const summaryLease = computed(() => {
    const orderInfoVal = orderInfo.value
    let tempList = []
    tempList = [
      { label: '预订车型', value: orderInfoVal.originalSiteModelName },
      { label: '车牌号', value: orderInfoVal.carLicenseNo },
    ]
    // 'notStarted' | 'orderInProgress' | 'orderCompleted'
    if (['orderInProgress', 'orderCompleted'].includes(orderStatus.value)) {
      tempList.push({ label: '交车车型', value: orderInfoVal.carModelName })
    }
    tempList.push(
      ...[
        { label: '订单来源', value: orderInfoVal.orderSourceName },
        { label: '订单渠道', value: orderInfoVal.channelTypeName },
        { label: '渠道单号', value: orderInfoVal.channelOrderCode },
        // { label: '订单获取方式', value: orderInfoVal.orderAcquisitionTypeName },
        { label: '预计租赁周期', slotName: 'leasePeriod' },
        { label: '取车门店', value: orderInfoVal.siteName },
      ],
    )
    if (['orderInProgress'].includes(orderStatus.value)) {
      tempList.push(
        ...[
          { label: '交车人', value: orderInfoVal.giveStaffName },
          { label: '交车时间', value: orderInfoVal.actualStartTime },
        ],
      )
    }
    if (['orderInProgress'].includes(orderStatus.value)) {
      // 渠道自动同步
      if (!orderIsMaintenance(orderInfoVal)) {
        tempList.push({ label: '还车门店', value: orderInfoVal.returnSiteName })
      }
    }
    // 渠道自动同步
    if (!orderIsMaintenance(orderInfoVal)) {
      tempList.push({ label: '还车门店', value: orderInfoVal.returnSiteName })
    }
    if (['orderCompleted'].includes(orderStatus.value)) {
      tempList.push(
        ...[
          { label: '还车人', value: orderInfoVal.returnStaffName },
          { label: '还车时间', value: orderInfoVal.actualEndTime },
        ],
      )
    }
    return tempList
  })

  // 表单规则
  const rules = computed(() => {
    let tempRules = {
      memberType: { required: true, message: '请选择客户类型' },
      memberPhone: [
        { required: true, message: '请输入联系电话' },
        { len: 11, match: /^[0-9]+$/, message: '仅支持数字，长度11位' },
      ],
      cardNumber: { match: /^[a-zA-Z0-9]+$/, message: '支持数字、英文' },
      siteId: { required: true, message: '请选择取车门店' },
      orderSource: { required: true, message: '请选择订单来源' },
      timeRange: [{ required: true, message: '请选择预计租赁周期' }, { validator: timeRangeValidator }],
      originalModelId: { required: true, message: '请选择车型' },

      // 交还车
      giveStaffId: [{ required: true, message: '请选择交车人' }],
      useStartTime: [{ required: true, message: '请选择交车时间' }],
      returnStaffId: [{ required: true, message: '请选择还车人' }],
      useEndTime: [{ required: true, message: '请选择交车时间' }],
    }
    // 客户类型为公司客户
    if (form.value.memberType == 1) {
      tempRules.clientId = { required: true, message: '请选择客户公司名称' }
    }
    // 渠道订单
    if (form.value.orderSource == 2) {
      tempRules.channelType = { required: true, message: '请选择订单渠道' }
      tempRules.channelOrderCode = { required: true, message: '请输入渠道单号' }
    }
    return tempRules
  })
  // 等待 customer 组件接口调用完成
  const waitCustomerDone = () => {
    return new Promise((resolve) => {
      setTimeout(() => {
        let fetching = customerRef.value.memberPhoneFetching
        if (fetching) {
          customerRef.value.waitMemberPhoneFetchingDone(() => {
            resolve()
          })
        } else {
          resolve()
        }
      }, 0)
    })
  }
  // 确认事件
  // formRef
  const formRef = ref()
  const okLoading = ref(false)
  const submitFn = () => {
    formRef.value.validate((valid, errors) => {
      if (!valid) {
        // 页面滚动到错误位置
        foldValidate(errors, true)
      } else {
        preCheck()
      }
    })
  }
  // 二次确认点击确定
  const confirmSubmit = () => {
    editNextFn()
  }
  // 二次确认点击取消
  const confirmCancel = () => {
    okLoading.value = false
  }
  // 预先校验 租期是否一致
  const confirmVisible = ref(false)
  const preCheck = () => {
    okLoading.value = true
    // 监听 customer 组件 memberPhoneFetching 完成
    waitCustomerDone()
      .then(() => {
        // 判断租期是否发生变化
        let prevStartTime = orderInfo.value.startTime
        let prevEndTime = orderInfo.value.endTime
        let currStartTime = form.value.startTime
        let currEndTime = form.value.endTime
        if (prevStartTime != currStartTime || prevEndTime != currEndTime) {
          confirmVisible.value = true
        } else {
          // 编辑保存
          editNextFn()
        }
      })
      .catch(() => {
        okLoading.value = false
      })
  }

  const editNextFn = () => {
    // 验证通过
    let param = {
      ...form.value,
    }
    // 获取 orderCarInfos
    const orderInfoVal = orderInfo.value
    const shortOrderCarInfoDtos = orderInfoVal.shortOrderCarInfoDtos
    if (shortOrderCarInfoDtos.length > 0) {
      let firstCarInfo = shortOrderCarInfoDtos[0]
      let lastCarInfo = shortOrderCarInfoDtos[shortOrderCarInfoDtos.length - 1]
      let orderCarInfos = []
      let formValue = form.value
      // 发生过交还车
      let giveCarInfo = {
        id: firstCarInfo.id,
        startCarMileage: formValue.startCarMileage,
        startCarOil: formValue.startCarOil,
        giveStaffId: formValue.giveStaffId,
        useStartTime: formValue.useStartTime,
        useStartRemark: formValue.useStartRemark,
        giveFileIds: formValue.giveFileIds,
        giveVideoFileIds: formValue.giveVideoFileIds,
      }
      // 已还车、已完成
      if (orderStatus.value == 'orderCompleted') {
        let returnCarInfo = {
          id: lastCarInfo.id,
          endCarMileage: formValue.endCarMileage,
          endCarOil: formValue.endCarOil,
          returnStaffId: formValue.returnStaffId,
          useEndTime: formValue.useEndTime,
          useEndRemark: formValue.useEndRemark,
          returnFileIds: formValue.returnFileIds,
          returnVideoFileIds: formValue.returnVideoFileIds,
        }
        if (firstCarInfo.id == lastCarInfo.id) {
          orderCarInfos = [
            {
              ...giveCarInfo,
              ...returnCarInfo,
            },
          ]
        } else {
          orderCarInfos = [giveCarInfo, returnCarInfo]
        }
      } else {
        orderCarInfos = [giveCarInfo]
      }
      param.orderCarInfos = orderCarInfos
    }
    okLoading.value = true
    modifyOrderAPI(param)
      .then(() => {
        confirmVisible.value = false
        useToast({
          title: '修改成功',
        }).then(() => {
          uni.$emit('operateSuccess', 'edit-order')
          uni.navigateBack()
        })
      })
      .catch(() => {
        okLoading.value = false
      })
  }
</script>
<style lang="less" scoped>
  .container {
    display: flex;
    flex-direction: column;
    .order-create-content {
      padding: 24rpx;
      padding-bottom: 125rpx;
    }
  }
  .lease-period-rentdays {
    font-size: 30rpx;
    color: #3072f6;
    margin-top: 8rpx;
  }
  .rent-days {
    font-size: 30rpx;
    text-align: right;
    color: #3072f6;
  }
  #footer-box {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #ffffff;
    z-index: 100;
    /deep/ .ve-button {
      padding: 0;
    }
  }
  .edit-lease-return {
    /deep/ .form-item-type {
      .ve-form-item__border {
        display: none;
      }
    }
    /deep/ .ve-card {
      box-shadow: none;
    }
    /deep/.ve-card-header {
      display: none;
    }
    /deep/ .ve-card-content {
      padding: 0;
    }
    /deep/ .ve-card-header-border-line {
      display: none;
    }
    .edit-lease-return-border {
      margin-top: 10rpx;
      height: 2rpx;
      width: 100%;
      background: rgba(216, 216, 216, 0.3);
    }
  }
  .video-wrapper {
    display: block;
    width: 100%;
    /deep/ .video-item {
      margin-bottom: 24rpx;
    }
  }
</style>
